<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>客户系统</el-breadcrumb-item>
			<el-breadcrumb-item>网络学生</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 表单 -->
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="姓名:">
					<el-input v-model="formInline.Name" placeholder="姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="formInline.Phone" placeholder="电话" clearable></el-input>
				</el-form-item>
				<el-form-item label="咨询师:">
					<el-input v-model="formInline.AskerId" placeholder="咨询师" clearable></el-input>
				</el-form-item>
				<el-form-item label="是否缴费:">
					<el-select v-model="formInline.IsPay" placeholder="是否缴费" clearable>
						<el-option label="--请选择--" value=""></el-option>
						<el-option label="是" value="是"></el-option>
						<el-option label="否" value="否"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否有效:">
					<el-select v-model="formInline.IsValid" placeholder="是否有效" clearable>
						<el-option label="--请选择--" value=""></el-option>
						<el-option label="是" value="是"></el-option>
						<el-option label="否" value="否"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否回访:">
					<el-select v-model="formInline.IsReturnVist" placeholder="--请选择--" clearable>
						<el-option label="是" value="是"></el-option>
						<el-option label="否" value="否"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="QQ:">
					<el-input v-model="formInline.QQ" placeholder="QQ" clearable></el-input>
				</el-form-item>
				<el-form-item label="创建时间:">
					<el-date-picker v-model="formInline.CreateTimeStr" type="date" placeholder="选择创建时间" clearable>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="-">
					<el-date-picker v-model="formInline.CreateTimeEnd" type="date" placeholder="选择创建时间" clearable>
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="dialogAddFormVisible = true" round>添加</el-button>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="primary" @click="exportExcel">导出Excel</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="tableData" id="outtable" border style="width: 100%">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column fixed="left" width="120" align="center" fit prop="Id" label="序号">
				</el-table-column>
				<el-table-column fixed="left" width="120" align="center" prop="Name" fit label="姓名">
				</el-table-column>
				<el-table-column fit prop="Sex" label="性别">
				</el-table-column>
				<el-table-column fit prop="Age" label="年龄">
				</el-table-column>
				<el-table-column fit width="120" prop="Phone" label="电话">
				</el-table-column>
				<el-table-column fit width="120" prop="QQ" label="QQ">
				</el-table-column>
				<el-table-column fit width="120" prop="Weixin" label="微信">
				</el-table-column>
				<el-table-column fit prop="MsgSource" label="来源部门">
				</el-table-column>
				<el-table-column fit prop="AskerId" label="咨询师">
				</el-table-column>
				<el-table-column fit prop="IsValid" label="是否有效">
				</el-table-column>
				<el-table-column fit prop="StuStatus" label="学历">
				</el-table-column>
				<el-table-column fit show-overflow-tooltip prop="CreateTime" label="创建时间" width="120">
				</el-table-column>
				<el-table-column fit prop="PerState" label="个人状态">
				</el-table-column>
				<el-table-column fit prop="IsReturnVist" label="是否回访">
				</el-table-column>
				<el-table-column fit show-overflow-tooltip width="120" prop="FirstVistitTime" label="首次回访时间">
				</el-table-column>
				<el-table-column fit prop="IsHome" label="是否上门">
				</el-table-column>
				<el-table-column fit show-overflow-tooltip prop="HomeTime" label="上门时间">
				</el-table-column>
				<el-table-column fit prop="Money" label="定金金额">
				</el-table-column>
				<el-table-column fit show-overflow-tooltip prop="PayTime" label="定金时间">
				</el-table-column>
				<el-table-column fit prop="IsPay" label="是否缴费">
				</el-table-column>
				<el-table-column fit show-overflow-tooltip prop="PrdMoneyTime" label="缴费时间">
				</el-table-column>
				<el-table-column fit prop="PreMoney" label="金额">
				</el-table-column>
				<el-table-column fit prop="CreateUser" label="录入人">
				</el-table-column>
				<el-table-column width="300" align="center" fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button icon="el-icon-search" type="success" size="small" @click="Select(scope.row)">详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" background
				:page-sizes="[5, 10, 15]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</el-card>
		<!-- 详情 -->
		<el-dialog title="详情" :visible.sync="dialogwebFormVisible" @close="closewebFormVisible">
			<el-form :model="webform">
				<el-form-item label="姓名" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Sex" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="年龄" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Age" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Phone" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="QQ" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.QQ" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="微信" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Weixin" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="来源部门" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.MsgSource" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="咨询师" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.AskerId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="学历" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.StuStatus" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="个人状态" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.PerState" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="首次回访时间" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.FirstVistitTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="上门时间" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.HomeTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="定金金额" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.Money" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="定金时间" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.PayTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="缴费时间" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.PrdMoneyTime" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="金额" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.PreMoney" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="录入人" :label-width="formwebLabelWidth">
					<el-input disabled v-model="webform.CreateUser" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="是否有效:" :label-width="formwebLabelWidth">
					<el-switch disabled v-model="webform.IsValid" active-color="#13ce66" active-value="是"
						inactive-value="否" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="是否回访:" :label-width="formwebLabelWidth">
					<el-switch disabled v-model="webform.IsReturnVist" active-color="#13ce66" active-value="是"
						inactive-value="否" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="是否上门:" :label-width="formwebLabelWidth">
					<el-switch disabled v-model="webform.IsHome" active-color="#13ce66" active-value="是"
						inactive-value="否" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="是否缴费:" :label-width="formwebLabelWidth">
					<el-switch disabled v-model="webform.IsPay" active-color="#13ce66" active-value="是"
						inactive-value="否" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 添加 -->
		<el-dialog title="添加" :visible.sync="dialogAddFormVisible">
		  <el-form :model="Addform">
		    <el-form-item label="学生姓名" :label-width="formAddLabelWidth">
		      <el-input v-model="Addform.Name" auto-complete="off"></el-input>
		    </el-form-item>
			<el-form-item label="性别" :label-width="formAddLabelWidth">
				<el-select v-model="Addform.Sex" placeholder="--请选择--">
				  <el-option label="--请选择--" value=""></el-option>
				  <el-option label="男" value="男"></el-option>
				   <el-option label="女" value="女"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年龄" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.Age" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="电话" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.Phone" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="QQ" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.QQ" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="微信" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.Weixin" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="来源部门" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.MsgSource" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="所属咨询师" :label-width="formAddLabelWidth">
				<el-select v-model="Addform.AskerId" placeholder="--请选择--">
				  <el-option label="--请选择--" value=""></el-option>
				  <el-option v-for="aa in asklists" :label="aa" :value="aa"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="是否有效" :label-width="formAddLabelWidth">
				<el-select v-model="Addform.IsValid" placeholder="--请选择--">
				  <el-option label="--请选择--" value=""></el-option>
				  <el-option label="是" value="是"></el-option>
				   <el-option label="否" value="否"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="学历" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.StuStatus" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="个人状态" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.PerState" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="定金金额" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.Money" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="是否缴费" :label-width="formAddLabelWidth">
				<el-select v-model="Addform.IsPay" placeholder="--请选择--">
				  <el-option label="--请选择--" value=""></el-option>
				  <el-option label="是" value="是"></el-option>
				   <el-option label="否" value="否"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="金额" :label-width="formAddLabelWidth">
			  <el-input v-model="Addform.PreMoney" auto-complete="off"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogAddFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="Add">确 定</el-button>
		  </div>
		</el-dialog>	
	</div>
</template>

<script>
	import FileSaver from "file-saver";
	import XLSX from "xlsx";
	export default {
		data() {
			return {
				formInline: {
					Name: '',
					Phone: '',
					AskerId: '',
					IsPay: '',
					IsValid: '',
					IsReturnVist: '',
					QQ: '',
					CreateTimeStr: '',
					CreateTimeEnd:''
				},
				tableData: [],
				dialogwebFormVisible: false,
				formwebLabelWidth: '150px',
				formAddLabelWidth: '150px',
				dialogAddFormVisible: false,
				webform: {},
				Addform: {
					Id: window.sessionStorage.getItem("token")
				},
				page: 1,
				limit: 5,
				count: 0,
				//所属咨询师
				asklists: {}
			}
		},
		created() {
			this.gettablelist();
			this.getAll();
		},
		methods: {
			closewebFormVisible(){
				this.Addform={},
				this.gettablelist();
			},
			//添加
			async Add() {
				const {
					data: res
				} = await this.$http.post('/api/api/netStudent/Addstudent', this.Addform)
				if (res.code !== 0) {
					this.$message.error(res.msg);
				} else {
					this.$message.success(res.msg);
					this.gettablelist();
					this.dialogAddFormVisible = false;
				}
			},
			//获取全部咨询师
			async getAll() {
				const {
					data: res
				} = await this.$http.post('/api/api/netStudent/GetAllask')
				this.asklists = res.data;
			},
			Select(row) {
				this.webform = row;
				this.dialogwebFormVisible = true;
			},
			handleSizeChange(val) {
				this.limit = val;
				this.gettablelist();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.gettablelist();
			},
			onSubmit() {
				this.gettablelist();
			},
			async gettablelist() {
				const {
					data: res
				} = await this.$http.get('/api/api/netStudent/GetWedStudent', {
					params: {
						page: this.page,
						limit: this.limit,
						Name: this.formInline.Name,
						Phone: this.formInline.Phone,
						AskerId: this.formInline.AskerId,
						IsPay: this.formInline.IsPay,
						IsValid: this.formInline.IsValid,
						IsReturnVist: this.formInline.IsReturnVist,
						QQ: this.formInline.QQ,
						CreateTimeStr: this.formInline.CreateTimeStr,
						CreateTimeEnd: this.formInline.CreateTimeEnd,
						Id:parseInt(window.sessionStorage.getItem('token'))
					}
				})
				if(res.code==0){
					// console.log(res)
					this.count = res.count;
					this.tableData = res.data;					
				}else{
					this.$message.error(res.msg);
				}								
			},
			//导出表格
			//定义导出Excel表格事件
			exportExcel() {
				let fix = document.querySelector('.el-table__fixed');
				let fix1 = document.querySelector('.el-table__fixed-right');
				let wb;
				if (fix) { //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
					wb = XLSX.utils.table_to_book(document.querySelector('#outtable').removeChild(fix));
					document.querySelector('#outtable').appendChild(fix);
				} else if (fix1) {
					wb = XLSX.utils.table_to_book(document.querySelector('#outtable').removeChild(fix1));
					document.querySelector('#outtable').appendChild(fix1);
				} else {
					wb = XLSX.utils.table_to_book(document.querySelector('#outtable'));
				}
				let wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(new Blob([wbout], {
						type: 'application/octet-stream'
					}), 'student.xlsx')
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			}
		}

	}
</script>



<style lang="less" scoped="scoped">
</style>
